<template>
  <view class="content">
    <Cover :showCover="showCover" />

    <Home
      :hiddenTab="hiddenTab"
      v-if="pageIndex === 0"
      class="animate__animated animate__fadeIn animate__fast"
    />
    <Team
      v-else-if="pageIndex === 1"
      class="animate__animated animate__fadeIn animate__fast"
    />
    <Plan
      v-else-if="pageIndex === 3"
      class="animate__animated animate__fadeIn animate__fast"
    />
    <Me
      v-else-if="pageIndex === 4"
      class="animate__animated animate__fadeIn animate__fast"
    />
    <MyTabBar
      class="myTab"
      @hiddenOther="handleHiddeOther"
      @showOther="handleShowOther"
      @changeTab="handleChangeTab"
    />
  </view>
</template>

<script>
  import {mapState} from "vuex";
import MyTabBar from "@/components/public/MyTabBar.vue";
import Home from "@/views/Home/index.vue";
import Team from "@/views/Team/index.vue";
import Plan from "@/views/Plan/index.vue";
import Me from "@/views/Me/index.vue";
import Cover from "@/views/Home/components/Cover.vue";
export default {
  components: {
    MyTabBar,
    Home,
    Team,
    Plan,
    Me,
    Cover,
  },
  data() {
    return {
      hiddenTab: false,
      pageIndex: 0,
      showCover: true,
    };
  },
  computed:{...mapState(["userInfo"])},
  onLoad() {
    setTimeout(() => {
      this.showCover = false;
    }, 2000);
  },
  methods: {
    handleComputedTagsUserList(){
      const tags = this.userInfo.tags;
      if(!tags.length){
        uni.showToast({
          icon:"error",
          title:"请先选择标签"
        })
        return;
      }
      console.log("用户标签：",tags);
      this.$store.dispatch("getUserListByTags",{tags});
      
    },
    handleHiddeOther() {
      this.hiddenTab = true;
    },
    handleShowOther() {
      this.hiddenTab = false;
    },
    handleChangeTab(index) {
      console.log(index);
      this.pageIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  width: 100vw;
}
.myTab {
  width: 100vw;
}
</style>
